<template>
  <div class="bannber_page">
    <vxe_table
      :options="options"
      @handleTableBtn="handleTableBtn"
      ref="baseTable"
    >
      <template #btn>
        <el-button
          type="success"
          icon="el-icon-user"
          @click="add"
          v-permission="['btn_banner_add']"
          >添加轮播</el-button
        >
      </template>

      <template #headUrl="{ row }">
        <el-image
          style="width:60px; "
          :src="row.imgUrl"
          :preview-src-list="[row.imgUrl]"
        >
        </el-image>
      </template>
    </vxe_table>
    <addDialog ref="add" @success="success"></addDialog>
  </div>
</template>

<script>
import vxe_table from "@/components/table/vxe_table.vue";
import tableMixin from "@/mixins";
import addDialog from "./comps/addDialog.vue";
import { getBanner, delBanner } from "@/api/common";
import { hasBtnAuth, parseTime } from "@/utils";
export default {
  mixins: [tableMixin],
  components: {
    vxe_table,
    addDialog,
  },
  data() {
    return {
      options: {
        id: "bannertable",
        apiFn: getBanner,
        cellConfig: {
          height: 100,
        },
        columns: [
          {
            field: "sort",
            title: "排序",
          },
          {
            field: "headUrl",
            title: "图片",
            type: "html",
            defaultValue: null,
            slot: "headUrl",
            // formatter: ({ row }) =>
            //   `<img style="width:60px;height:30px;margin-top:2px;" src=${row.imgUrl} />`,
          },
          {
            field: "linkUrl",
            title: "功能",
            type: "html",
            formatter: ({ row }) => {
              let arr = [
                null,
                "共享",
                "二手",
                "配件",
                "以旧换新",
                "入驻",
                "官网",
              ];
              return arr[row.linkUrl];
            },
          },

          {
            field: "which",
            title: "展示位置",
            type: "html",
            formatter: ({ row }) => {
              if (row.which == 1) {
                return "都显示";
              } else if (row.which == 2) {
                return "显示在网页";
              } else {
                return "显示在小程序";
              }
            },
          },
          {
            field: "state",
            title: "状态",
            type: "html",
            valueType: "select",
            options: [
              {
                label: "已上架",
                value: 1,
              },
              {
                label: "已下架",
                value: 0,
              },
            ],
            search: true,
            formatter: ({ row }) => {
              if (row.state) {
                return "<span style='color:green'>已上架</span>";
              } else {
                return "<span style='color:red'>未上架</span>";
              }
            },
          },
          {
            field: "updateTime",
            title: "时间",
            type: "html",
            formatter: ({ row }) => parseTime(row.updateTime),
          },
        ],
        btn: [
          {
            title: "编辑",
            handleName: "edit",
            type: "success",
              show: () => hasBtnAuth("btn_banner_edit"),
          },
          
          {
            title: "删除",
            handleName: "handleDel",
            type: "danger",
              show: (row) => row.state == 1 && hasBtnAuth("btn_banner_edit"),
          },
        ],
      },
    };
  },

  methods: {
    edit(row, index) {
      console.log(row, index);
      this.$refs.add.open(row);
    },
    handleADD() {
      this.$refs.add.open();
    },
    handleDel(row) {
      this.$del({ id: row.id }, delBanner);
    },
  },
};
</script>

<style lang="scss" scoped></style>
